<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- vue 文件 -->
  <script src="js/vue.js"></script>
  <script src="./js/axios.js"></script>
  <!-- 引入http-vue-loader -->
  <script src="./js/httpVueLoader.js"></script>
  <!-- element-ui 文件 -->
  <link rel="stylesheet" href="./css/element.css">
  <script src="./js/element.js"></script>
  <!-- css文件 -->
  <link rel="stylesheet" href="css/index.css">
</head>

<body>
  <div id="app">
    <base-layout>
      <div>
        <div>
          <video-list :title="title" :list="ListData"></video-list>
        </div>
      </div>
    </base-layout>
  </div>

  <script>
    Vue.use(httpVueLoader)
    //创建 vm 实例对象
    const vm = new Vue({
      el: '#app',
      data: {
        title: "",
        ListData: [],
        tags: {
          collect: "收藏视频",
          hot: "热门视频",
          recommend: "推荐视频"
        }
      },
      components: {
        'base-layout': httpVueLoader('./components/BaseLayout.vue'),
        'video-list': httpVueLoader('./components/VideoList.vue'),
      },
      async created(){
        // 获取url的参数
        const params = new URLSearchParams(window.location.search);
        const tag = params.get('tag');
        this.title = this.tags[tag];

        await axios.get('http://localhost:8080/VideosToTagServlet.do?tag=' + tag).then(res => {
          this.ListData = res.data.map(item => {
            //判断img是否是完整的路径
            item.img.indexOf("http") === -1 && (
              item.img = "http://localhost:8080/img/" + item.img
            )
            return item
          })
        });
      }
    });
  </script>
</body>

</html>